<template>
	<view>
		<view class="uni-form-item uni-column">
			<view class="title">名称</view>
			<input class="uni-input" v-model="FormData.name" focus placeholder="请输入名称" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">手机号</view>
			<input class="uni-input" v-model="FormData.phone" placeholder="请输入手机号" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">地址(点击选择)</view>
			<input class="uni-input" v-model="FormData.address" readonly @click="showMulLinkageThreePicker" placeholder="地址(点击选择)" />
		</view>
		
		<mpvue-city-picker 
		:themeColor="themeColor" 
		ref="mpvueCityPicker" 
		:pickerValueDefault="cityPickerValueDefault"
		@onCancel="onCancel" 
		@onConfirm="onConfirm"
		>
		</mpvue-city-picker>
		
		<view class="uni-padding-wrap uni-common-mt">
			<button type="primary" @click="editInfo">提交信息</button>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list'
	import uniListItem from '@/components/uni-list-item/uni-list-item'
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	
	export default {
		components: {
			uniList,
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				FormData: '',
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
			}
		},
		onLoad() {
			let params = {
				page: 1,
				limit: 10,
			};
			this.init(params);
		},
		methods: {
			init(params) {
				params.account = uni.getStorageSync('user').account
				params.type = 1
				this.$api.getXntAccountOrMessList(params).then((res) => {
					this.FormData = res.rows[0]
					console.log(this.FormData)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			editInfo() {
				let params = {}
				console.log(uni.getStorageSync('user'))
				params.roleid = uni.getStorageSync('user').roleid
				params.type = 1
				params.name = this.FormData.name
				params.phone = this.FormData.phone
				params.address = this.FormData.address
				this.$api.setXntAccountOrMessList(params).then((res) => {
					// 用 vuex 保存用户登录状态
					if(res.success) {
						uni.showToast({
							icon: 'success',
							title: "提交成功",
							duration: 2000,
						});
						setTimeout((i) =>{
							uni.redirectTo({
							   url: "userInfo",
							});
						},500)
					}else {
						uni.showToast({
							icon: 'none',
							title: '提交失败',
							duration: 2000
						});
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				this.pickerText = e.label
				this.FormData.address = this.pickerText
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		position: relative;
		background-color: #fdfdfd;
		border-bottom: 1px #f5f5f5 solid
	}

	.example-title__after {
		position: relative;
		color: #031e3c
	}

	.example-title:after {
		content: '';
		position: absolute;
		left: 30upx;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 6upx;
		height: 32upx;
		background-color: #ccc
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 30upx;
		background: #fff
	}

	.example-info {
		padding: 30upx;
		color: #3b4144;
		background: #fff
	}
</style>